<template>
  <div class="page-container">
    <page-header></page-header>

    <div class="page-card">
      <div class="table-filter">
        <div class="filter-left">

          <div class="filter-row">
            <div class="row-title">报备状态：</div>
            <div class="row-content">
              <div v-for="(item,index) in filters1" :key="index" class="row-checkbox">
                <a-checkbox>
                  {{ item.title }}
                </a-checkbox>
              </div>
            </div>
          </div>

          <div class="filter-row">
            <div class="row-title">项目类型：</div>
            <div class="row-content">
              <div v-for="(item,index) in filters2" :key="index" class="row-checkbox">
                <a-checkbox>
                  {{ item.title }}
                </a-checkbox>
              </div>
            </div>
          </div>

          <div class="filter-row">
            <div class="row-title">相关客户：</div>
            <div class="row-content">
              <div class="row-select">
                <a-select
                    show-search
                    placeholder="选择相关客户"
                    option-filter-prop="children"
                >
                  <a-select-option value="jack">
                    Jack
                  </a-select-option>
                  <a-select-option value="lucy">
                    Lucy
                  </a-select-option>
                  <a-select-option value="tom">
                    Tom
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>

          <div class="filter-row">
            <div class="row-title">关联项目：</div>
            <div class="row-content">
              <div class="row-select">
                <a-select
                    show-search
                    placeholder="选择关联项目"
                    option-filter-prop="children"
                >
                  <a-select-option value="jack">
                    项目1
                  </a-select-option>
                  <a-select-option value="lucy">
                    项目2
                  </a-select-option>
                  <a-select-option value="tom">
                    项目3
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>

        </div>


        <div class="filter-right">
          <div class="filter-search">
            <a-input-search placeholder="输入项目名称" />
          </div>
        </div>
      </div>

      <div class="table-wrap">
        <div class="table-header">
          <div class="font-wb">共计<span class="font-c-master margin-lr5">502</span>条数据</div>
        </div>
        <a-table :columns="columns" :data-source="data" bordered></a-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'reportList',
  data () {
    return {
      filters1: [
        {
          title: '草稿',
          value: '1'
        },
        {
          title: '已报备',
          value: '2'
        },
        {
          title: '已立项',
          value: '3'
        },
        {
          title: '已作废',
          value: '4'
        }
      ],
      filters2: [
        {
          title: '类型1',
          value: '1'
        },
        {
          title: '类型2',
          value: '2'
        },
        {
          title: '类型3',
          value: '3'
        },
        {
          title: '类型4',
          value: '4'
        }
      ],
      columns: [
        {
          title: '项目名称',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
        },
        {
          title: '相关客户',
          dataIndex: 'client',
          key: 'client',
          ellipsis: true,
        },
        {
          title: '关联项目',
          dataIndex: 'project',
          key: 'link',
          ellipsis: true,
        },
        {
          title: '报备人',
          dataIndex: 'person',
          key: 'person',
          ellipsis: true,
        },
        {
          title: '项目类型',
          dataIndex: 'type',
          key: 'type',
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          ellipsis: true,
          sorter: (a, b) => a.date - b.date
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true
        },
      ],
      data: [
        {
          key: '1',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
        {
          key: '2',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
        {
          key: '3',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
        {
          key: '4',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
        {
          key: '5',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
        {
          key: '6',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
        {
          key: '7',
          name: '云南能投建设项目一期',
          client: 'xxxx有限公司、xxxxxxxxxx有限公司',
          project: 'xxxxx项目、xxxxxxxxx项目',
          person: '张三',
          type: '策划组',
          createTime: '2016-03-05',
          status: '已报备'
        },
      ]
    };
  },
  mounted () {

  },
  methods: {}
};
</script>

<style lang="scss" scoped>
</style>
